<!--
 * @Descripttion: 个人信息
 * @Author: 颜博骏 bojun@ssc-hn.com
 * @Date: 2024-04-10
 * @LastEditors: xinqiao lxq1990.0716@qq.com
 * @LastEditTime: 2025-03-10
-->
<template>
  <a-modal v-model:visible="visible" title="个人信息" :footer="null">
    <a-row :gutter="24">
      <a-col :flex="1">
        <a-form-item label="名称">
          <a-tooltip>
            <template #title>{{ data.userName }}</template>
            {{ ellipsis(data.userName, 8) }}
          </a-tooltip>
        </a-form-item>
      </a-col>
      <a-col :flex="2">
        <a-form-item label="手机号">
          {{ data.userPhone }}
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="24">
      <a-col :span="24">
        <a-form-item label="组织信息">
          <a-table :columns="table.columns" :data-source="table.datas" :loading="table.loading" :pagination="false">
            <template #bodyCell="{ column, record }">
              <template v-if="column.dataIndex === 'isDeptLeader'">
                <span>{{ record.isDeptLeader === 1 ? '是' : '否' }}</span>
              </template>
            </template>
          </a-table>
        </a-form-item>
      </a-col>
    </a-row>
  </a-modal>
</template>

<script lang="ts" setup>
  import { type TreeProps } from 'ant-design-vue'
  import { computed, onUpdated, reactive, ref } from 'vue'

  import { requestPersonalData } from '/@/api/business/company/user'
  import { HttpCodeEnum } from '/@/enums/httpEnum'
  import { getCompanyInfo } from '/@/storage'
  const props = defineProps({
    visible: { type: Boolean, default: false },
    id: { type: String, default: '' },
  })
  const data = ref<PersonalDataTypes.IResponse>({
    userName: '',
    userPhone: '',
  })
  /** 表格配置 */
  const table = reactive({
    columns: [
      { title: '所在组织', dataIndex: 'deptName', key: 'deptName' },
      { title: '是否负责人', dataIndex: 'isDeptLeader' },
      { title: '岗位', dataIndex: 'positionNames' },
      { title: '上级', dataIndex: 'userDeptLeaderName' },
    ],
    datas: [] as TreeProps['treeData'],
    loading: false,
  })
  const getPersonalData = async () => {
    const { companyId } = getCompanyInfo()
    table.loading = true
    const { responseCode, responseData } = await requestPersonalData({ companyId }).finally(() => {
      table.loading = false
    })
    if (responseCode === HttpCodeEnum.SUCCESS) {
      data.value = responseData
      table.datas = responseData.deptList
    }
  }
  const ellipsis = (text: string, maxLength: number) => {
    if (text.length > maxLength) {
      return text.substr(0, maxLength - 3) + '...'
    }
    return text
  }
  onUpdated(() => {
    getPersonalData()
  })
  const emits = defineEmits(['update:visible'])

  const visible = computed({
    get: () => props.visible,
    set: (val) => emits('update:visible', val),
  })
</script>

<style lang="less"></style>
